<template>
  <div
    v-if="!initializing"
    class="vc-component"
    :style="visual.parseStyle(currNode.currStyle)"
  >
    <el-radio-group
      v-model="pageData[currNode.name]"
      @change="handleChange"
      v-bind="options"
    >
      <el-radio-button
        key="" value=""
        v-if="showAll"
      >全部</el-radio-button>
      <el-radio-button
        v-for="item in dataList"
        :key="item.key"
        :value="item.key"
        @click.prevent="clickButton(item.key)"
      >{{item.value}}</el-radio-button>
    </el-radio-group>
  </div>
</template>

<script setup>
import { ref, computed, inject, getCurrentInstance, nextTick, onMounted } from 'vue';
import visual from "@/visual/js/visual";
import { getDictionary } from '@/utils/system';
import EventHandler from "@/visual/js/event";

const props = defineProps({
  node: Object
});

const initializing = ref(true);
const pageData = inject("pageData", ref({}));
const showAll = ref(false);
const currDictCode = ref('');
const dataList = ref([]);
const currNode = ref(props.node);
const eventHandler = new EventHandler(
  inject('eventHandler', Function, true),
  getCurrentInstance(),
  currNode.value
);

const init = async(styleId) => {
  initializing.value = true;
  visual.initStyle(currNode.value, styleId);
  const compStyle = currNode.value.currCompStyle || {};
  showAll.value = compStyle['showAll'] || false;
  if (compStyle['dataSource'] === 'enum') {
    let optionList = [];
    (compStyle['enumValue'] || '').split(',').forEach(item => {
      optionList.push({key: item, value: item});
    });
    dataList.value = optionList;
  } else if (compStyle['dataSource'] === 'dict') {
    currDictCode.value = compStyle['dictCode'] || '';
    await loadDictionary(currDictCode.value);
  }
  await nextTick(() => initializing.value = false);
};

const loadValue = async() => {
  const dataList = (await visual.loadData(currNode.value.compData, eventHandler, getData(), currNode.value)).data || [];
  pageData.value[currNode.value.name] = dataList.length > 0 && dataList[0]['内容'] || '';
};

const options = computed(() => {
  const compStyle = currNode.value.currCompStyle || {};
  const options = {};
  visual.addIfNotNull(options, compStyle, 'size');
  return options;
});

const loadDictionary = async(dictCode) => {
  dataList.value = dictCode ? await getDictionary(dictCode) : [];
};

const clickButton = (key) => {
  if (pageData.value[currNode.value.name] === key) {
    pageData.value[currNode.value.name] = '';
  } else {
    pageData.value[currNode.value.name] = key;
  }

  handleChange();
};

const handleChange = () => {
  eventHandler.trigger('变更事件');
};

const getData = () => {
  return {
    inputParam: currNode.value.inputParam,
    value: pageData.value[currNode.value.name]
  };
};

const changeStyle = (styleId) => {
  init(styleId);
};

const refresh = async() => {
  initializing.value = true;
  await loadValue();
  await nextTick(() => initializing.value = false);
};

onMounted(async() => {
  await init();
  await loadValue();
  await eventHandler.trigger('初始化事件');
});

defineExpose({ getData, changeStyle, refresh });
</script>